<template>
  <div class="table_main">
    <div class="search_box flex flex-no-wrap justify-around">
      <el-form style="width: 65%" ref="searchForm" :model="searchForm" :inline="true" size="mini">
        <search-form-box :show-more-btn="true">
          <template slot="showSearch">
            <el-form-item label="名称" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="执行状态" prop="execute_status">
              <el-select v-model="searchForm.execute_status" clearable placeholder="请选择执行状态">
                <el-option value="1" label="未执行"></el-option>
                <el-option value="2" label="执行中"></el-option>
                <el-option value="4" label="已完成"></el-option>
                <el-option value="5" label="手动关闭"></el-option>
                <el-option value="3" label="已过期"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="媒体类型" prop="media_type_ids">
              <el-select v-model="searchForm.media_type_ids" placeholder="请选择媒体类型" multiple filterable>
                <el-option v-for="item in allMediaTypeArr" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </template>
          <template slot="hideSearch">
            <el-form-item label="截止时间开始" prop="deadline_date_min">
              <el-date-picker
                v-model="searchForm.deadline_date_mix"
                type="date"
                placeholder="请选择开始时间"
                value-format="yyyy-MM-dd"
                format="yyyy年MM月dd日"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="至" prop="deadline_date_max">
              <el-date-picker
                v-model="searchForm.deadline_date_max"
                type="date"
                placeholder="请结束开始时间"
                value-format="yyyy-MM-dd"
                format="yyyy年MM月dd日"
              >
              </el-date-picker>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" plain @click="search">搜索</el-button>
              <el-button type="info" plain @click="resetForm(false)">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
      <div style="width: 15%;text-align: right;">
        <el-button-group>
          <el-tooltip effect="dark" content="多工单生成报告时使用" placement="top">
            <el-button style="margin-right: 10px;" icon="el-icon-warning-outline" type="warning" size="mini"
                       @click="generateManyWorkOrderReport()"
            >生成报告
            </el-button>
          </el-tooltip>
          <el-button style="margin-right: 10px;" type="primary" size="mini"
                     @click="showManyList"
          >多工单报告页面
          </el-button>
        </el-button-group>
      </div>
      <div v-loading="loading" style="width: 20%">
        总执行进度：
        <el-progress :percentage="allProgress" :color="customColors"></el-progress>
      </div>
    </div>
    <div class="table_box">
      <el-table v-if="currentType == type" :data="tableData" v-loading="changeParams.tableLoading" border size="mini"
                stripe
                header-row-class-name="table_header" @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            {{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="类型" width="85" align="center">
          <template>
            <el-tag v-if="type == 1" size="mini" type="success">新安装</el-tag>
            <el-tag v-if="type == 2" size="mini">上刊</el-tag>
            <el-tag v-if="type == 3" size="mini" type="danger">下刊</el-tag>
            <el-tag v-if="type == 4" size="mini" type="warning">巡检</el-tag>
            <el-tag v-if="type == 5" size="mini" type="info">维修</el-tag>
            <el-tag v-if="type == 7" size="mini">换画</el-tag>
            <el-tag v-if="type == 8" size="mini" type="success">中间监播</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="200" align="center" prop="name"></el-table-column>
        <el-table-column label="媒体类型" width="100" align="center">
          <template slot-scope="scope">
            <template v-if="(scope.row.media_type_name_list||[]).length">
              <div v-for="(item,index) in scope.row.media_type_name_list" :key="index">
                <el-tag size="mini" type="primary">{{ item }}</el-tag>
              </div>
            </template>
            <div v-if="(scope.row.media_type_name_list||[]).length===0">
              <el-tag size="mini" type="danger">暂无点位类型</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" width="150" align="center" prop="deadline"></el-table-column>
        <el-table-column label="工人最新提交时间" width="150" align="center" prop="lastSubmit"></el-table-column>
        <el-table-column label="工单创建时间" width="150" align="center" prop="created_at"></el-table-column>
        <el-table-column width="150" align="center" fixed="right">
          <template slot="header">
            进度_(<span style="color: orange">待审</span>+通过)/总数
          </template>
          <template slot-scope="scope">
            <span>(<span :class="scope.row.installed_to_check_num>0?'text_orange':''">
              {{ scope.row.installed_to_check_num }}</span>+
              {{ scope.row.installed_passed_num }})
              /({{ scope.row.total_num }})</span>
            <span>
              <el-progress
                :percentage="getPercentage(scope.row.installed_to_check_num, scope.row.installed_passed_num,scope.row.total_num)"
                :color="customColors" :text-inside="true" :stroke-width="20"
              ></el-progress>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="执行状态" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <div v-if="!scope.row.mode">
              <el-tag v-if="scope.row.execute_status == 1" size="mini" type="info">未执行</el-tag>
              <el-tag v-if="scope.row.execute_status == 2" size="mini">执行中</el-tag>
              <el-tag v-if="scope.row.execute_status == 4" size="mini" type="success">已完成</el-tag>
              <el-tag v-if="scope.row.execute_status == 3" size="mini" type="danger">已过期</el-tag>
              <el-tag v-if="scope.row.execute_status == 5" size="mini" type="success">手动关闭</el-tag>
            </div>
            <div v-if="scope.row.mode">
              <el-tag v-if="scope.row.mode == 1" type="warning" size="mini">挂起</el-tag>
              <el-tag v-if="scope.row.mode == 2" type="danger" size="mini">作废</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="420" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button-group class="btn_group_box">
              <el-tooltip effect="dark" content="进度查看" placement="top">
                <el-button size="mini" icon="el-icon-view" @click="showBuildingProgressDialog(scope.row)">
                </el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="审核" placement="top">
                   <span>
                    <el-button size="mini" type="warning" icon="el-icon-coordinate"
                               :disabled="scope.row.mode == 1 || scope.row.mode == 2" @click="check(scope.row)"
                    >
                    </el-button>
                   </span>
              </el-tooltip>
              <el-tooltip v-if="type != 5" effect="dark" content="编辑" placement="top">
                <el-button size="mini" type="primary" icon="el-icon-edit"
                           @click="edit(scope.row.id)"
                >
                </el-button>
              </el-tooltip>
			  <el-tooltip v-if="type == 5" effect="dark" content="修改截止时间" placement="top" key="editDeadlineBtn">
			    <el-button size="mini" type="primary" icon="el-icon-timer"
			               @click="showEditDeadline(scope.row)"
			    >
			    </el-button>
			  </el-tooltip>
              <el-tooltip v-if="type != 5" effect="dark" content="删除" placement="top">
                  <span>
                     <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.execute_status ==2"
                                @click="remove(scope.row.id)"
                     >
                    </el-button>
                  </span>
              </el-tooltip>
              <el-tooltip v-if="scope.row.report_can_download == null" effect="dark" content="生成报告"
                          placement="top"
              >
                  <span>
                    <el-button size="mini" type="warning"
                               icon="el-icon-warning-outline"
                               :disabled="(multipleSelection||[]).length>0"
                               @click="showGenerateReportDialog(scope.row)"
                    >
                    </el-button>
                  </span>
              </el-tooltip>
              <el-tooltip v-if="scope.row.report_can_download==0||scope.row.reportGenerateing" effect="dark"
                          content="正在生成"
                          placement="top"
              >
                <el-button size="mini" icon="el-icon-loading">
                </el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.report_can_download==1" effect="dark"
                          content="下载报告"
                          placement="top"
              >
                <el-button size="mini" icon="el-icon-download" type="success"
                           @click="showDownloadTipDialog(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.img_zip_can_download == null" effect="dark"
                          content="生成图片包"
                          placement="top"
              >
                <el-button size="mini" icon="el-icon-folder" @click="createImgPackage(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.img_zip_can_download === 0||scope.row.imgPackageGenerateing" effect="dark"
                          content="正在生成"
                          placement="top"
              >
                <el-button size="mini"
                           icon="el-icon-loading"
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.img_zip_can_download ===1" effect="dark"
                          content="下载图片包"
                          placement="top"
              >
                <el-button size="mini"
                           icon="el-icon-download" type="success" @click="showDownloadDialog(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.img_zip_can_download ===2" effect="dark"
                          content="图片包生成出错,生成出错点击可重新生成" placement="top"
              >
                <el-button size="mini"
                           icon="el-icon-error" type="danger" @click="createImgPackage(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip effect="dark"
                          content="关闭" placement="top"
              >
                  <span>
                    <el-button size="mini" type="success" icon="el-icon-collection"
                               :disabled="scope.row.execute_status == 4||scope.row.execute_status == 5"
                               @click="close(scope.row.id)"
                    ></el-button>
                  </span>
              </el-tooltip>
              <el-tooltip effect="dark"
                          content="分配工人" placement="top"
              >
                <el-button size="mini" icon="el-icon-thumb" type="primary"
                           @click="showAssignWorkersDialog(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip v-if="type != 1" effect="dark"
                          content="导出" placement="top"
              >
                <el-button icon="el-icon-tickets" size="mini" type="primary"
                           @click="exportList(scope.row)"
                >
                </el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="searchForm.page"
        :page-sizes="[10,20,50,100, 200, 400]"
        :page-size.sync="searchForm.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="changeParams.total"
      >
      </el-pagination>
      <el-dialog title="生成报告" :visible.sync="generateReportDialogVisible" width="70%" center
                 @close="closeReportDialog"
                 @open="openDialog"
      >
        <el-form ref="reportForm" :model="reportForm" size="mini" label-width="100px" label-position="right">
          <el-divider content-position="left">基本配置项</el-divider>
          <el-row style="padding-left: 60px">
            <el-col :span="12">
              <el-form-item label="文件名" prop="file_name"
                            :rules="[{required:true,message:'请输入文件名',trigger: 'blur'}]"
              >
                <el-input style="width: 80%" v-model="reportForm.file_name" placeholder="请输入文件名" clearable>
                  <template slot="append">.pptx</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="每设备一张图" prop="per_device_one_photo">
                <el-select v-model="reportForm.per_device_one_photo">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="每页照片数量" prop="per_ppt_photo_nums">
                <el-select v-model="reportForm.per_ppt_photo_nums">
                  <el-option :value="2"></el-option>
                  <el-option :value="3"></el-option>
                  <el-option :value="4"></el-option>
                  <el-option :value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">PPT首页</el-divider>
          <el-row style="padding-left: 60px">
            <el-col :span="12">
              <el-form-item label="标题" prop="title">
                <el-input style="width: 80%" v-model="reportForm.title" placeholder="请输入标题" clearable></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="type">
                <el-input style="width: 80%" v-model="reportForm.type" placeholder="请输入类型" clearable></el-input>
              </el-form-item>
              <el-form-item label="显示客户名" prop="show_customer">
                <el-switch v-model="reportForm.show_customer"></el-switch>
              </el-form-item>
              <el-form-item v-if="reportForm.show_customer" label="客户名" prop="customer_name">
                <el-input style="width: 80%" v-model="reportForm.customer_name" placeholder="请输入客户名" clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="导出类型" prop="report_type">
                <el-radio-group v-model="reportForm.report_type">
                  <el-radio :label="1">详细版</el-radio>
                  <el-radio :label="2">精简版</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="副标题" prop="sub_title">
                <el-input style="width: 80%" v-model="reportForm.sub_title" placeholder="请输入副标题" clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="公司名" prop="company_name">
                <el-input style="width: 80%" v-model="reportForm.company_name" placeholder="请输入公司名" clearable
                          autocomplete="on"
                ></el-input>
              </el-form-item>
              <el-form-item label="显示时间段" prop="show_daterange">
                <el-switch v-model="reportForm.show_daterange" @change="(val)=>{if(val){addDateRange(true)}}"
                ></el-switch>
              </el-form-item>
              <el-form-item v-if="reportForm.show_daterange" label="时间段" prop="daterange">
                <div v-for="(item,index) in reportForm.daterange" :key="index">
                  <el-input style="width: 80%" v-model="reportForm.daterange[index]"
                            placeholder="请输入时间段" clearable
                  ></el-input>
                  <i class="el-icon-remove-outline" :class="index == 0?'text-grey':'text-red'"
                     style="margin-left: 5px;font-size: 20px" @click="removeDateRange(index)"
                  ></i>
                  <i class="el-icon-circle-plus-outline text-green" style="margin-left: 5px;font-size: 20px"
                     @click="addDateRange"
                  ></i>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="generateReportDialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="generateReport">生 成</el-button>
        </span>
      </el-dialog>
      <el-dialog title="下载提示" width="30%" :visible.sync="downloadTipDialogVisible" @close="closeDownloadTipDialog">
        <span>您确认要下载该报告?或重新生成?</span>
        <div style="text-align: right;padding-bottom: 20px">
          <el-button size="mini" @click="downloadTipDialogVisible = false">取消</el-button>
          <el-button size="mini" type="warning" @click="regenerate">重新生成</el-button>
          <el-button size="mini" type="primary" @click="download(tmpRow2.report_path)">下载</el-button>
        </div>
      </el-dialog>
      <el-dialog title="进度查看" width="50%" :visible.sync="buildingProgressDialogVisible"
                 @close="closeBuildingProgressDialog" center
      >
        <div style="padding:0 10px">
          <div style="margin-bottom: 10px;text-align: left">
            <el-input style="width: 200px" clearable v-model="buildingRequestParams.name" placeholder="请输入楼盘名称"
                      size="mini"
            ></el-input>
            <el-button style="margin-left: 10px" size="mini" type="primary" @click="getBuildingProgressTableList">查询
            </el-button>
          </div>
          <el-table v-loading="buildingProgressTableLoading" :data="buildingProgressData" max-height="600" size="mini"
                    stripe border
          >
            <el-table-column label="楼盘名称" min-width="200" prop="name" align="center"></el-table-column>
            <el-table-column label="总数" width="100" prop="total_num" align="center"></el-table-column>
            <el-table-column label="提交数" width="100" prop="submit_num" align="center"></el-table-column>
            <el-table-column label="未提交数" width="120" prop="un_submit_num" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="showPointDetailDialog(scope.row,true)">已提交</el-button>
                <el-button v-if="buildingRequestParams.work_order_type_id != 1" size="mini"
                           @click="showPointDetailDialog(scope.row,false)"
                >未提交
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog :title="(pointTableSearchForm.is_submit?'已':'未')+'提交设备详情'" width="40%"
                   :visible.sync="pointDialogVisible" center append-to-body
                   @close="closePointDetailDialog"
        >
          <div style="padding:0 10px">
            <div style="margin-bottom: 10px;text-align: left">
              <el-input style="width: 200px" clearable v-model="pointTableSearchForm.code" placeholder="请输入设备编号"
                        size="mini"
              ></el-input>
              <el-button style="margin-left: 10px" size="mini" type="primary" @click="pointTableSearch">查询</el-button>
            </div>
            <el-table v-loading="pointTableLoading" :data="pointTableData" size="mini" stripe border>
              <el-table-column label="设备类型" width="200" prop="type_name" align="center"></el-table-column>
              <el-table-column label="编号" width="100" prop="code" align="center"></el-table-column>
              <el-table-column label="详情" min-width="100" prop="detail" align="center"></el-table-column>
            </el-table>
            <el-pagination
              @size-change="handlePointTableSizeChange"
              @current-change="handlePointTableCurrentChange"
              :current-page.sync="pointTableSearchForm.page"
              :page-sizes="[10, 20, 50, 100, 200, 400]"
              :page-size.sync="pointTableSearchForm.page_size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pointTableTotal"
            >
            </el-pagination>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="pointDialogVisible = false">关 闭</el-button>
          </span>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="buildingProgressDialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
      <building-tree :show="buildingTreeDialogVisible" :tree-data="tmpTreeData" @close="closeBuildingTreeDialog"
                     @save="saveAssignWorkers"
      ></building-tree>

      <!--下载提示-->
      <el-dialog title="下载提示" :visible.sync="downloadDialogVisible" width="30%" center>
        <span>您确认要下载该图片包?或重新生成?</span>
        <span slot="footer" class="dialog-footer">
          <div style="text-align: right">
            <el-button @click="downloadDialogVisible = false" size="mini">取 消</el-button>
            <el-button type="warning" @click="createImgPackage(tmpRow,true)" size="mini">重新生成</el-button>
            <el-button type="primary" @click="downloadImgPackage" size="mini">下载</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
    <!--多工单生成报告列表-->
    <el-dialog title="多工单生成报告列表" :visible.sync="centerDialogVisible" width="60%" center top="30px"
               @close="closeDialog"
    >
      <el-form :inline="true">
        <el-form-item label="工单">
          <el-select v-model="manyWorkOrderReportSearchForm.order_id" filterable size="mini" clearable>
            <el-option v-for="(item,index) in work_order_arr" :value="item.id" :label="item.name" :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" plain type="primary" @click="manySearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table max-height="600px" :data="manyWorkOrderReportTableData"
                v-loading="manyWorkOrderReportTableLoading" border size="mini"
                stripe
      >
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            {{ (manyWorkOrderReportListParams.page - 1) * manyWorkOrderReportListParams.page_size + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="类型" width="80" align="center">
          <template slot-scope="scope" v-if="(scope.row.work_order_list||[]).length>0">
            <el-tag v-if="scope.row.work_order_list[0].work_order_type_id == 1" size="mini" type="success">新安装
            </el-tag>
            <el-tag v-if="scope.row.work_order_list[0].work_order_type_id == 2" size="mini">上刊</el-tag>
            <el-tag v-if="scope.row.work_order_list[0].work_order_type_id == 3" size="mini" type="danger">下刊</el-tag>
            <el-tag v-if="scope.row.work_order_list[0].work_order_type_id == 4" size="mini" type="warning">巡检</el-tag>
            <el-tag v-if="scope.row.work_order_list[0].work_order_type_id == 5" size="mini" type="info">维修</el-tag>
            <el-tag v-if="scope.row.work_order_list[0].work_order_type_id == 7" size="mini">换画</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工单名称" align="center" min-width="300">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.work_order_list" style="margin: 3px 0 3px 0" :key="index">
              <el-tag type="primary" size="mini">{{ item.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at" width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button v-if="scope.row.report_can_download==0" size="mini"
                         icon="el-icon-loading"
              >
                正在生成
              </el-button>
              <el-button v-if="scope.row.report_can_download==1" size="mini"
                         icon="el-icon-download" type="success" @click="downloadManyReport(scope.row)"
              >
                下载报告
              </el-button>
              <el-tooltip effect="dark" content="生成出错,请联系管理员" placement="top">
                <el-button v-if="scope.row.report_can_download==2" size="mini"
                           icon="el-icon-error" type="danger"
                >
                  生成出错
                </el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleManyWorkOrderReportTableSizeChange"
        @current-change="handleManyWorkOrderReportTableCurrentChange"
        :current-page.sync="manyWorkOrderReportSearchForm.page"
        :page-sizes="[10,20,50,100, 200, 400]"
        :page-size.sync="manyWorkOrderReportSearchForm.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="manyWorkOrderReportTotal"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" size="mini">关 闭</el-button>
      </span>
    </el-dialog>
	
	<el-dialog ref="cuFormDialogDeadlineRef" title="生成维修工单" center width="40%" top="100px" 
	:visible.sync="cuFormDialogDeadlineVisible" append-to-body
	           @close="closeCuFormDialogDeadline"
	>
	  <el-form ref="cuForm" :model="cuFormDeadline" label-width="120px" label-position="right" :rules="rule">
		<el-form-item label="id" prop="id" v-show="false">
		  <el-input v-model="cuFormDeadline.id"></el-input>
		</el-form-item>
	    <el-form-item label="截止时间" prop="deadline">
	      <el-date-picker
	        v-model="cuFormDeadline.deadline"
	        type="datetime"
	        placeholder="选择工单截止时间"
	        value-format="yyyy-MM-dd HH:mm:ss"
	      >
	      </el-date-picker>
	    </el-form-item>
	  </el-form>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="cuFormDialogDeadlineVisible = false">取 消</el-button>
	    <el-button type="primary" @click="confirmEditDeadline">确 定</el-button>
	  </span>
	</el-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import {
  allList,
  createImgPackage,
  detail, edit, editDeadline,
  genWorkOrderReport, getAllWorkOrderProgressByTypeId,
  getWorkOrderSubmissionByBuildingId,
  handClosed, listBuildingMacthWorker,
  listProcessOfBuilding,
  remove,
  export_work_order_point_detail, assignWorkers
} from '@/api/workOrder/workOrder'
import { formatDateByFmt, generateUUID } from '@/utils/util'
import buildingTree from '@/views/business/install_order/components/buildingTree'
import { add, divide, multiply } from '@/utils/amount'
import { list_media_types } from '@/api/building/building'
import { manyGenWorkOrderReport, manyList } from '@/api/workOrder/manyWorkOrderReport'
import { cloneDeep } from 'lodash'

export default {
  name: 'work_order_content_tabal',
  components: {
    SearchFormBox,
    buildingTree
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    currentType: {
      type: String,
      default: []
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
		cuFormDialogDeadlineVisible: false,
		cuFormDeadline:{
			id: null,
			deadline: null
		},
		
      searchForm: {
        page: 1,
        page_size: 10,
        name: null,
        execute_status: null,
        work_order_type_id: this.type,
        deadline_date_mix: null,
        deadline_date_max: null,
        media_type_ids: []
      },
      listParams: {
        page: 1,
        page_size: 10,
        name: null,
        execute_status: null,
        work_order_type_id: this.type,
        deadline_date_mix: null,
        deadline_date_max: null,
        media_type_ids: []
      },
      allMediaTypeArr: [],
      changeParams: {
        total: null,
        tableLoading: false
      },
      generateReportDialogVisible: false,
      reportForm: {
        id: null,
        file_name: null,
        title: null,
        sub_title: null,
        show_customer: true,
        customer_name: null,
        type: null,
        company_name: null,
        show_daterange: true,
        daterange: [],
        per_device_one_photo: true,
        per_ppt_photo_nums: 3,
        ids: [],
        many_report_id: null,
        report_type: 1
      },
      tmpRow: null,
      tmpRow2: null,
      downloadTipDialogVisible: false,
      buildingProgressDialogVisible: false,
      buildingProgressData: [],
      buildingRequestParams: {
        name: null,
        work_order_id: null,
        work_order_type_id: null
      },
      pointDialogVisible: false,
      pointTableData: [],
      pointTableTotal: 0,
      pointTableSearchForm: {
        page: 1,
        page_size: 10,
        building_id: null,
        code: null,
        is_submit: null
      },
      pointTableListParams: {
        page: 1,
        page_size: 10,
        building_id: null,
        code: null,
        is_submit: null
      },
      buildingProgressTableLoading: false,
      pointTableLoading: false,
      tmpOrderId: null,
      tmpBillSaleId: null,
      tmpSelectBuildingIds: [],
      tmpTreeData: [],
      buildingTreeDialogVisible: false,
      tmpReq: {},
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#6f7ad3', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#5cb87a', percentage: 100 }
      ],
      loading: false,
      allProgress: 0,
      downloadDialogVisible: false,
      multipleSelection: [],
      manyFlag: false,
      centerDialogVisible: false,
      manyWorkOrderReportTableData: [],
      manyWorkOrderReportTableLoading: false,
      manyWorkOrderReportListParams: {
        page: 1,
        page_size: 10,
        order_id: null
      },
      manyWorkOrderReportSearchForm: {
        page: 1,
        page_size: 10,
        order_id: null
      },
      manyWorkOrderReportTotal: 0,
      data_row: null,
      manyFlagTmp: false,
      data_row2: null,
      work_order_arr: []
    }
  },
  created() {
    this.initALlMediaTypeArr()
    this.initAllList()
  },
  methods: {
    resetListParams() {
      this.listParams.page = 1
      this.listParams.page_size = 10
      this.resetForm(true)
    },
    resetForm(flag = false) {
      this.$refs['searchForm'].resetFields()
      if (!flag) {
        this.listParams = cloneDeep(this.searchForm)
        this.search()
      }
    },
    exportList(row) {
      const params = {
        id: row.id,
        name: row.name
      }
      export_work_order_point_detail(params)
      // export_work_order_point_detail({id: id}).then((res) => {
      //   window.open(res.data)
      // })
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handlePointTableSizeChange(val) {
      this.pointTableListParams.page_size = val
      this.getPointTableList()
    },
    handlePointTableCurrentChange(val) {
      this.pointTableListParams.page = val
      this.getPointTableList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    search() {
      this.searchForm.page = 1
      this.listParams = cloneDeep(this.searchForm)
      this.getList()
    },
    getList() {
      this.$emit('search', this.listParams, this.changeParams)
    },
    edit(id) {
      let type_id = this.type
      this.$router.push({
        name: 'install_order_edit_page',
        params: {
          id: id,
          type_id: type_id
        }
      })
    },
	// 修改截止时间
	showEditDeadline(row){
		this.cuFormDeadline = {
			id: row.id,
			deadline: row.deadline,
		};
		this.cuFormDialogDeadlineVisible = true;
	},
	// 确认提交修改截止时间
	confirmEditDeadline(){
		editDeadline(this.cuFormDeadline).then(res => {
		  if (res.data) {
		    this.$message.success('修改成功')
			this.cuFormDialogDeadlineVisible = false;
		    this.getList()
		  } else {
		    this.$message.error('修改失败')
		  }
		}).catch(() => {
		  this.$message.error('修改失败')
		})
	},
	closeCuFormDialogDeadline() {
		this.cuFormDeadline = {
			id: null,
			deadline: null,
		}
	},
    check(row) {
      this.$emit('check', row.id, row.name, this.type)
    },
    remove(id) {
      this.$confirm('确定删除工单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        remove({ id }).then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
          this.search()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    close(id) {
      this.$confirm('确定关闭工单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        handClosed({ id }).then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '关闭成功!'
            })
          }
          loading.close()
          this.search()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    showGenerateReportDialog(row) {
      this.tmpRow = row
      this.reportForm.id = row.id
      switch (this.type) {
        case 1:
          this.reportForm.file_name = '(新安装报告)' + row.name
          this.reportForm.title = row.name
          this.reportForm.type = '新安装报告'
          this.reportForm.show_customer = false
          this.reportForm.show_daterange = false
          break
        case 2:
          this.reportForm.file_name = '(上刊报告)' + row.name
          this.reportForm.title = row.name
          this.reportForm.type = '上刊报告'
          this.reportForm.daterange.push(formatDateByFmt(row.start_at, 'yyyy年MM月dd日') + '-' + formatDateByFmt(row.end_at, 'yyyy年MM月dd日'))
          break
        case 3:
          this.reportForm.file_name = '(下刊报告)' + row.name
          this.reportForm.title = row.name
          this.reportForm.type = '下刊报告'
          this.reportForm.daterange.push(formatDateByFmt(row.start_at, 'yyyy年MM月dd日') + '-' + formatDateByFmt(row.end_at, 'yyyy年MM月dd日'))
          break
        case 4:
          this.reportForm.file_name = '(巡检报告)' + row.name
          this.reportForm.title = row.name
          this.reportForm.type = '巡检报告'
          this.reportForm.show_customer = false
          this.reportForm.show_daterange = false
          break
        case 5:
          this.reportForm.file_name = '(维修报告)' + row.name
          this.reportForm.title = row.name
          this.reportForm.type = '维修报告'
          this.reportForm.show_customer = false
          this.reportForm.show_daterange = false
          break
      }
      this.generateReportDialogVisible = true
    },
    addDateRange(flag = false) {
      if (flag) {
        if (this.reportForm.daterange.length == 0) {
          this.reportForm.daterange.push('')
        }
      } else {
        this.reportForm.daterange.push('')
      }
    },
    removeDateRange(index) {
      if (index != 0) {
        this.reportForm.daterange.splice(index, 1)
      }
    },
    closeReportDialog() {
      this.reportForm = {
        id: null,
        file_name: null,
        title: null,
        sub_title: null,
        show_customer: true,
        customer_name: null,
        type: null,
        company_name: null,
        show_daterange: true,
        daterange: [],
        per_device_one_photo: true,
        per_ppt_photo_nums: 3,
        many_report_id: null,
        ids: [],
        report_type: 1
      }
      this.manyFlagTmp = false
      this.data_row2 = null
      this.tmpRow = null
    },
    closeDownloadTipDialog() {
      this.tmpRow2 = null
      this.data_row = null
      this.manyFlag = false
    },
    showDownloadTipDialog(row) {
      this.downloadTipDialogVisible = true
      this.tmpRow2 = row
    },
    /**
     * 生成报告
     */
    generateReport() {
      this.generateReportDialogVisible = false
      if (!this.manyFlag && !this.manyFlagTmp) {
        this.tmpRow.reportGenerateing = true
        this.tmpRow.report_can_download = 0
        genWorkOrderReport(this.reportForm).then(
          res => {
            if (res.code == 200) {
              this.$message.success('后台正在生成报告，请稍后刷新页面进行下载')
            }
          }
        )
      } else {
        if (this.manyFlagTmp) {
          this.data_row2.report_can_download = 0
        }
        manyGenWorkOrderReport(this.reportForm).then(res => {
          if (res.code == 200) {
            this.$message.success(res.message)
          }
        })
      }
    },
    /**
     * 重新生成
     */
    regenerate() {
      if (this.manyFlag) {
        this.generateManyWorkOrderReport(this.data_row)
        this.manyFlagTmp = true
        this.data_row2 = this.data_row
      } else {
        this.showGenerateReportDialog(this.tmpRow2)
      }
      this.downloadTipDialogVisible = false
    },
    download(url) {
      if (!url) {
        this.$message.error('报告不存在，请联系管理员')
        return
      } else {
        window.open(url, '_blank')
        this.downloadTipDialogVisible = false
      }
    },
    closeBuildingProgressDialog() {
      this.buildingProgressData = []
      this.buildingRequestParams = {
        name: null,
        work_order_id: null,
        work_order_type_id: null
      }
    },
    closePointDetailDialog() {
      this.pointTableData = []
      this.pointTableListParams = {
        page: 1,
        page_size: 10,
        building_id: null,
        code: null,
        is_submit: null
      }
      this.pointTableSearchForm = {
        page: 1,
        page_size: 10,
        building_id: null,
        code: null,
        is_submit: null
      }
      this.pointTableTotal = 0
    },
    pointTableSearch() {
      this.pointTableSearchForm.page = 1
      this.pointTableListParams = Object.assign({}, this.pointTableSearchForm)
      this.getPointTableList()
    },
    getPointTableList() {
      const params = Object.assign(this.buildingRequestParams, this.pointTableListParams)
      this.pointTableLoading = true
      getWorkOrderSubmissionByBuildingId(params).then(res => {
        this.pointTableLoading = false
        this.pointTableData = res.data.records
        this.pointTableTotal = res.data.total
      })
    },
    getBuildingProgressTableList() {
      this.buildingProgressTableLoading = true
      listProcessOfBuilding(this.buildingRequestParams).then(res => {
        this.buildingProgressTableLoading = false
        this.buildingProgressData = res.data
      })
    },
    showBuildingProgressDialog(row) {
      this.buildingRequestParams.work_order_id = row.id
      this.buildingRequestParams.work_order_type_id = this.type
      this.buildingProgressDialogVisible = true
      this.getBuildingProgressTableList()
    },
    showPointDetailDialog(row, flag) {
      this.pointTableSearchForm.is_submit = flag
      this.pointTableSearchForm.building_id = row.building_area_id
      this.pointTableListParams.is_submit = flag
      this.pointTableListParams.building_id = row.building_area_id
      this.pointDialogVisible = true
      this.getPointTableList()
    },
    showAssignWorkersDialog(row) {
      if (row.bill_sale_id) {
        this.tmpBillSaleId = row.bill_sale_id
      }
      this.tmpOrderId = row.id
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      detail(row.id).then(res => {
        this.tmpReq = res.data
        let buildingWorkersMap = new Map()
        res.data.buidingDetailVOS.forEach(item => {
          this.tmpSelectBuildingIds.push(item.id)
          buildingWorkersMap.set(item.id, item.workers)
        })
        this.tmpTreeData = []
        let data = {
          id: -1,
          label: '常州市',
          children: [],
          is_leaf: false,
          disabled: false
        }
        listBuildingMacthWorker(this.tmpSelectBuildingIds).then(res => {
          res.data.forEach(item => {
            let children = []
            item.buildingAreaList.forEach(building => {
              let find = buildingWorkersMap.get(building.id)
              if (find) {
                children.push({
                  id: building.id,
                  label: building.name,
                  is_leaf: true,
                  children: [],
                  works: find,
                  disabled: false
                })
              } else {
                children.push({
                  id: building.id,
                  label: building.name,
                  is_leaf: true,
                  children: [],
                  works: [],
                  disabled: false
                })
              }
            })
            data.children.push({
              id: generateUUID(),
              label: item.area,
              children,
              is_leaf: false,
              disabled: false
            })
          })
          this.tmpTreeData.push(data)
          this.buildingTreeDialogVisible = true
          loading.close()
        }).catch(() => {
          this.$message.error('系统异常')
          loading.close()
        })
      }).catch(() => {
        this.$message.error('系统异常')
        loading.close()
      })
    },
    saveAssignWorkers(data) {
      this.$confirm('确定保存工人？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const req = {
          id: this.tmpReq.id
        }
        req.work_order_building_worker_ids = {}
        data.forEach(item => {
          req.work_order_building_worker_ids[item.id] = item.works.map(tmp => {
            return tmp.id
          })
        })
        assignWorkers(req).then(res => {
          if (res.data) {
            this.$message.success('操作成功')
            loading.close()
            this.closeBuildingTreeDialog()
          } else {
            loading.close()
            this.$message.error('操作失败')
          }
        }).catch(() => {
          loading.close()
          this.$message.error('操作失败')
        })
      }).catch(() => {

      })
    },
    closeBuildingTreeDialog() {
      this.buildingTreeDialogVisible = false
      this.tmpTreeData = []
      this.tmpSelectBuildingIds = []
      this.tmpOrderId = null
      this.tmpBillSaleId = null
      this.tmpReq = {}
    },
    getPercentage(notPass, pass, total) {
      if (total === 0) {
        return 0
      }
      let sum = add(notPass, pass)
      let percentage = parseFloat(multiply(divide(sum, total), 100).toFixed(2))
      return percentage
    },
    getAllWorkOrderProgress() {
      this.loading = true
      getAllWorkOrderProgressByTypeId({ work_order_type_id: this.type }).then(res => {
        this.loading = false
        if (res.data !== null && res.data.total_num !== 0) {
          this.allProgress = parseFloat(multiply(divide(res.data.installed_total_num, res.data.total_num), 100).toFixed(2))
        } else {
          this.allProgress = 0
        }
      })
    },
    createImgPackage(row, flag = false) {
      if (row.installed_passed_num > 0) {
        this.$confirm('确定生成图片包', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          createImgPackage({ work_order_id: row.id }).then(() => {
            loading.close()
            this.$message.success('后台正在生成图片包，请稍后刷新页面进行下载')
            row.imgPackageGenerateing = true
            row.img_zip_can_download = 0
            if (flag) {
              this.downloadDialogVisible = false
            }
          }).catch(() => {
            this.$message.error('生成失败,请联系管理员')
            loading.close()
          })
        }).catch(() => {

        })
      } else {
        this.$message.warning('无审核通过的图片,请通过审核会在生成')
      }
    },
    showDownloadDialog(row) {
      this.tmpRow = row
      this.downloadDialogVisible = true
    },
    /**
     * 下载图片包
     */
    downloadImgPackage() {
      if (this.tmpRow && this.tmpRow.img_zip_path) {
        window.open(this.tmpRow.img_zip_path, '_blank')
        this.downloadDialogVisible = false
      } else {
        this.$message.error('图片包不存在请联系管理员')
      }
    },
    initALlMediaTypeArr() {
      list_media_types().then(res => {
        this.allMediaTypeArr = res.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    generateManyWorkOrderReport() {
      if (this.data_row) {
        this.reportForm.many_report_id = this.data_row.id
        this.manyFlag = true
        let row = this.data_row.work_order_list[0]
        this.reportForm.ids = this.data_row.work_order_list.map(item => {
          return item.id
        })
        switch (row.work_order_type_id) {
          case 1:
            this.reportForm.file_name = '(新安装报告)' + row.name
            this.reportForm.title = row.name
            this.reportForm.type = '新安装报告'
            this.reportForm.show_customer = false
            this.reportForm.show_daterange = false
            break
          case 2:
            this.reportForm.file_name = '(上刊报告)' + row.name
            this.reportForm.title = row.name
            this.reportForm.type = '上刊报告'
            this.reportForm.daterange.push(formatDateByFmt(row.start_at, 'yyyy年MM月dd日') + '-' + formatDateByFmt(row.end_at, 'yyyy年MM月dd日'))
            break
          case 3:
            this.reportForm.file_name = '(下刊报告)' + row.name
            this.reportForm.title = row.name
            this.reportForm.type = '下刊报告'
            this.reportForm.daterange.push(formatDateByFmt(row.start_at, 'yyyy年MM月dd日') + '-' + formatDateByFmt(row.end_at, 'yyyy年MM月dd日'))
            break
          case 4:
            this.reportForm.file_name = '(巡检报告)' + row.name
            this.reportForm.title = row.name
            this.reportForm.type = '巡检报告'
            this.reportForm.show_customer = false
            this.reportForm.show_daterange = false
            break
          case 5:
            this.reportForm.file_name = '(维修报告)' + row.name
            this.reportForm.title = row.name
            this.reportForm.type = '维修报告'
            this.reportForm.show_customer = false
            this.reportForm.show_daterange = false
            break
        }
        this.generateReportDialogVisible = true
      } else {
        if (this.multipleSelection.length > 0) {
          this.manyFlag = true
          let row = this.multipleSelection[0]
          this.reportForm.ids = this.multipleSelection.map(item => {
            return item.id
          })
          switch (this.type) {
            case 1:
              this.reportForm.file_name = '(新安装报告)' + row.name
              this.reportForm.title = row.name
              this.reportForm.type = '新安装报告'
              this.reportForm.show_customer = false
              this.reportForm.show_daterange = false
              break
            case 2:
              this.reportForm.file_name = '(上刊报告)' + row.name
              this.reportForm.title = row.name
              this.reportForm.type = '上刊报告'
              this.reportForm.daterange.push(formatDateByFmt(row.start_at, 'yyyy年MM月dd日') + '-' + formatDateByFmt(row.end_at, 'yyyy年MM月dd日'))
              break
            case 3:
              this.reportForm.file_name = '(下刊报告)' + row.name
              this.reportForm.title = row.name
              this.reportForm.type = '下刊报告'
              this.reportForm.daterange.push(formatDateByFmt(row.start_at, 'yyyy年MM月dd日') + '-' + formatDateByFmt(row.end_at, 'yyyy年MM月dd日'))
              break
            case 4:
              this.reportForm.file_name = '(巡检报告)' + row.name
              this.reportForm.title = row.name
              this.reportForm.type = '巡检报告'
              this.reportForm.show_customer = false
              this.reportForm.show_daterange = false
              break
            case 5:
              this.reportForm.file_name = '(维修报告)' + row.name
              this.reportForm.title = row.name
              this.reportForm.type = '维修报告'
              this.reportForm.show_customer = false
              this.reportForm.show_daterange = false
              break
          }
          this.$nextTick(() => {
            this.$refs['reportForm'].clearValidate()
          })
          this.generateReportDialogVisible = true
        } else {
          this.$message.error('请选择需要生成的工单报告')
        }
      }
    },
    showManyList() {
      this.centerDialogVisible = true
      this.getManyList()
    },
    manySearch() {
      this.manyWorkOrderReportSearchForm.page = 1
      this.manyWorkOrderReportListParams = cloneDeep(this.manyWorkOrderReportSearchForm)
      this.getManyList()
    },
    getManyList() {
      this.manyWorkOrderReportTableLoading = true
      manyList(this.manyWorkOrderReportListParams).then(res => {
        this.manyWorkOrderReportTableLoading = false
        this.manyWorkOrderReportTableData = res.data.records
        this.manyWorkOrderReportTotal = res.data.total
      })
    },
    handleManyWorkOrderReportTableSizeChange(val) {
      this.manyWorkOrderReportListParams.page_size = val
      this.getManyList()
    },
    handleManyWorkOrderReportTableCurrentChange(val) {
      this.manyWorkOrderReportListParams.page = val
      this.getManyList()
    },
    downloadManyReport(row) {
      this.downloadTipDialogVisible = true
      this.manyFlag = true
      this.tmpRow2 = row
      this.data_row = row
    },
    openDialog() {
      this.$nextTick(() => {
        this.$refs['reportForm'].clearValidate()
      })
    },
    initAllList() {
      allList().then(res => {
        this.work_order_arr = res.data
      })
    },
    closeDialog() {
      this.manyWorkOrderReportListParams = {
        page: 1,
        page_size: 10,
        order_id: null
      }
    }
  }
}
</script>

<style scoped>
.search_box {
  padding-left: 20px;
}

/deep/ .table_header {
  font-weight: bold;
  color: black;
}

.text_orange {
  color: orange
}

.btn_group_box span {
  float: left;
}
</style>
